<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下一步 - {$config.WEB_SITE_TITLE}</title>
    <script src="__PUBLIC__/Home/js/adaptive.js"></script>
    <script src="__PUBLIC__/Home/js/device.min.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/Home/css/reset.css">
    <link rel="stylesheet" href="__PUBLIC__/Home/css/con-header.css">
    <script src="__PUBLIC__/Home/js/mui.min.js"></script>
    <link href="__PUBLIC__/Home/css/mui.min.css" rel="stylesheet"/>

    <style>
        h4,h5{margin-top: 0px;margin-bottom: 0px;}
        input::-webkit-input-placeholder,
        textarea::-webkit-input-placeholder {
            color: #9B9B9B;font-size: 0.3rem;
        }

        .content{width: 7.5rem;height: auto;margin: 0 auto;background: #fff;margin-top: 0.88rem;z-index: 10;padding-bottom: 1rem;}
        .top a{position: absolute;right: 0.3rem;bottom: 0.1rem;color: #fff;}
        .top{z-index: 100!important;}

        .ruzhu2{width: 100%;height: auto;padding: 0.3rem 0.3rem 1rem;}
        .ruzhu2 .p1{font-size: 0.34rem;color: #333;font-weight: 600}

      .sf{width: 100%;height: auto;overflow: hidden;margin-bottom: 0.5rem;}
      .sf li{width: 3.3rem;height: 2rem;border: 1px solid #DEDEDE;float: left;margin-right: 0.2rem;border-radius: 0.2rem;margin-bottom: 0.2rem;
      position: relative;padding-top: 0.4rem;}
        .sf li:nth-child(1) img{margin-top: 0.15rem;}
        .sf li:nth-child(1){border: none;background: #FCF9EF;padding-top: 0px;}
        .sf li:nth-child(2n){margin-right: 0;}
        /*.sf li img{margin-top: 0.4rem;}*/
        .sf li p{font-size: 0.2rem;color: #999}
        .sf li .sss{position: absolute;left: 0px;top: 0px;width: 100%;height: 100%;}

        .sf li input[type=file]{float: left;
            background-size:cover;width: 100px;height: 100px;text-decoration: none;position: absolute;left: 0rem;top: 0rem;opacity: 0;}
        /*上传营业执照*/
        .addvideo{width: 50%;height:4.4rem;border: 1px solid #DEDEDE;border-radius: 0.2rem;position: relative;padding-top: 1.5rem}
        .addvideo input[type=file]{float: left;
            background-size:cover;width: 100px;height: 100px;text-decoration: none;position: absolute;left: 0rem;top: 0rem;opacity: 0;}


        .next{width: 100%;height: 0.9rem;border-radius: 0.5rem;display: block;line-height: 0.9rem;
        ;text-align: center;;color: #333;font-size: 0.32rem;margin-top: 1rem;border: 1px solid #DEDEDE}

       button{width: 100%;height: 0.9rem;border-radius: 0.5rem;outline: none;text-align: center;background: #19B7BE;color: #fff;font-size: 0.32rem;margin-top: 0.4rem;}
    </style>
</head>
<body>


<div class="content">
    <div class="top">
        <h4>入驻机构</h4>
        <span class="back"></span>
    </div>

    <div class="ruzhu2">
        <p class="p1"> 法人手持身份证</p>
        <form action="" method="post">
        <ul class="sf">
            <li>
                <img src="__PUBLIC__/Home/img/faren.png" alt="" class="spjz">
            </li>
            <li>
                <img src="__PUBLIC__/Home/img/add.png" alt="" class="juzhong">
                <p style="text-align: center">上传手持身份证正面</p>
                <input type="file" name="file" id="file"  accept="image/*"  onchange="showPic(this,'s1')" multiple="multiple"  >

            </li>
            <li>
                <img src="__PUBLIC__/Home/img/add.png" alt="" class="juzhong">
                <p style="text-align: center">上传身份证正面</p>
                <input type="file" name="file" id="file2"  accept="image/*"  onchange="showPic(this,'s2')" multiple="multiple"  >

            </li>
            <li>
                <img src="__PUBLIC__/Home/img/add.png" alt="" class="juzhong">
                <p style="text-align: center">上传身份证反面</p>
                <input type="file" name="file" id="file3"  accept="image/*"  onchange="showPic(this,'s3')" multiple="multiple"  >

            </li>

        </ul>

        <p class="p1"> 营业执照</p>
        <div class="addvideo">
            <img src="__PUBLIC__/Home/img/add.png" alt="" class="juzhong">
            <p style="text-align: center">上传营业执照</p>
            <input type="file" name="file" id="file4"  accept="image/*" onchange="showPic(this,'s4')" multiple="multiple"  >
            <input type="hidden" name="sfz_sc" class="s1">
            <input type="hidden" name="sfz_z" class="s2">
            <input type="hidden" name="sfz_f" class="s3">
            <input type="hidden" name="yyzz" class="s4">
        </div>


        <a href="{:U('User/Admission_mec')}" class="juzhong next">上一步</a>

        <button class="juzhong sub" type="" >确认提交</button>
        </form>
    </div>






</div>
<script src="__PUBLIC__/Home/js/jquery-1.11.1.js"></script>
<script>
    $(".back").click(function () {
        window.history.back(-1);
    })



</script>

<script>
    function showPic(e,s) {
        let n=0
        let  file=e.files[0]
        //创建读取文件的对象
        var reader = new FileReader();

        //创建文件读取相关的变量
        var imgFile;
         let that=e;
        //为文件读取成功设置事件
        reader.onload=function(e) {
            // alert('文件读取完成');
            imgFile = e.target.result;
            $('.'+s).val(imgFile)
            // $(that).next().attr("src",imgFile)

            $(that).parent().append("<img src='' class='limg mui-icon mui-icon-closeempty' style='position: absolute;left: 0px;top: 0px;width: 100%;height: 100%;border-radius: 0.2rem'>");
            $(that).parent().find(".limg").attr("src",imgFile);
            // $(this).attr("src",imgFile);
            // n++;
            // if(n<=5){
            //     $(".s-img").append("<li><img src='' class='limg'></li>");
            //     $(".s-img li:last").find(".limg").attr("src",imgFile);
            // }else{
            //
            // }
        };

        //正式读取文件
        
        reader.readAsDataURL(file);

    }
</script>
</body>
</html>